<template>
  <div class="apps-container">
    <el-container>
      <el-main>
        <h1 class="page-title">实用工具集</h1>

        <el-row :gutter="20">
          <draggable v-model="sortedApps" :animation="200" item-key="id" class="apps-grid">
            <template #item="{ element: app }">
              <el-col :xs="24" :sm="12" :md="8" :lg="6" style="margin-bottom: 20px">
                <el-card
                  class="app-card"
                  :body-style="{ padding: '0' }"
                  shadow="hover"
                  @click="$router.push(app.route)"
                >
                  <div class="card-content">
                    <div class="card-header">
                      <el-icon :color="app.iconColor" :size="24">
                        <component :is="app.icon" />
                      </el-icon>
                      <span class="card-title">{{ app.name }}</span>
                    </div>

                    <div class="card-body">
                      <p class="app-description">
                        {{ app.description }}
                      </p>
                    </div>

                    <div class="card-footer">
                      <el-button :color="app.iconColor" text @click.stop="$router.push(app.route)">
                        立即使用
                        <el-icon class="el-icon--right">
                          <arrow-right />
                        </el-icon>
                      </el-button>
                    </div>
                  </div>
                </el-card>
              </el-col>
            </template>
          </draggable>
        </el-row>
      </el-main>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
import { ArrowRight } from '@element-plus/icons-vue';
import draggable from 'vuedraggable';
import { useSettingStore } from '@/store/modules/setting';

const settingStore = useSettingStore();

const defaultApps = [
  {
    id: 1,
    name: '存款利息计算器',
    description: '快速计算银行存款的利息收益，支持单利和复利计算，可查看年度收益明细。',
    icon: 'CreditCard',
    iconColor: '#409EFF',
    route: '/apps/interest-calculator'
  },
  {
    id: 2,
    name: 'JSON格式化工具',
    description: 'JSON数据格式化、压缩、转换，支持语法高亮和结构树展示。',
    icon: 'Document',
    iconColor: '#67C23A',
    route: '/apps/json-formatter'
  },
  {
    id: 3,
    name: '时间戳转换',
    description: '在时间戳和日期时间格式之间互相转换，支持多种格式。',
    icon: 'Timer',
    iconColor: '#909399',
    route: '/apps/timestamp'
  },
  {
    id: 4,
    name: '二维码生成器',
    description: '生成自定义文本或链接的二维码，支持自定义样式和Logo。',
    icon: 'PictureRounded',
    iconColor: '#E6A23C',
    route: '/apps/qrcode'
  },
  {
    id: 5,
    name: 'Markdown编辑器',
    description: '在线编辑Markdown文档，实时预览渲染效果。',
    icon: 'Document',
    iconColor: '#67C23A',
    route: '/apps/markdown'
  },
  {
    id: 6,
    name: '图片压缩工具',
    description: '批量压缩图片文件，支持多种格式，快速导出。',
    icon: 'PictureRounded',
    iconColor: '#E6A23C',
    route: '/apps/image-compress'
  },
  {
    id: 7,
    name: '进制转换器',
    description: '在二进制、八进制、十进制、十六进制之间进行转换。',
    icon: 'Switch',
    iconColor: '#409EFF',
    route: '/apps/base-converter'
  },
  {
    id: 8,
    name: '随机密码生成',
    description: '生成安全的随机密码，可自定义长度和字符类型。',
    icon: 'Key',
    iconColor: '#909399',
    route: '/apps/password-generator'
  },
  {
    id: 9,
    name: 'BOM转换工具',
    description: '处理Excel格式的BOM数据，支持数据合并、格式转换和智能分割导出。',
    icon: 'Files',
    iconColor: '#F56C6C',
    route: '/apps/bom-transfer'
  },
  {
    id: 10,
    name: '富文本编辑器',
    description: '富文本编辑器',
    icon: 'Files',
    iconColor: '#F56C6C',
    route: '/apps/editor'
  }
];

const apps = ref(defaultApps);

// 计算属性：根据存储的排序重新排列应用
const sortedApps = computed({
  get() {
    if (settingStore.appsSort.length === 0) {
      return apps.value;
    }

    // 获取已排序的应用
    const sortedApps = settingStore.appsSort
      .map(id => apps.value.find(app => app.id === id))
      .filter(Boolean);

    // 获取未在排序中的新应用（后添加的应用）
    const unsortedApps = apps.value.filter(app => !settingStore.appsSort.includes(app.id));

    // 合并已排序的应用和未排序的应用
    return [...sortedApps, ...unsortedApps];
  },
  set(newApps) {
    // 保存新的排序到 store
    settingStore.setAppsSort(newApps.map(app => app?.id).filter(Boolean));
  }
});

onMounted(() => {
  // 如果 store 中没有保存的顺序，初始化为默认顺序
  if (settingStore.appsSort.length === 0) {
    settingStore.setAppsSort(apps.value.map(app => app.id));
  }
});
</script>

<style scoped>
.apps-container {
  padding: 20px;
}

.page-title {
  font-size: 28px;
  margin-bottom: 24px;
  color: var(--el-text-color-primary);
}

.app-card {
  height: 100%;
  transition: transform 0.2s;
  cursor: pointer;
}

.app-card:hover {
  transform: translateY(-4px);
}

.card-content {
  padding: 16px;
}

.card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.card-title {
  font-size: 18px;
  font-weight: 500;
  color: var(--el-text-color-primary);
}

.app-description {
  color: var(--el-text-color-secondary);
  font-size: 14px;
  line-height: 1.4;
  height: 40px;
  margin: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.card-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}

.apps-grid {
  display: contents;
}

/* 拖拽时的样式 */
.sortable-ghost {
  opacity: 0.5;
  background: #c8ebfb;
}

.sortable-drag {
  opacity: 0.9;
}
</style>
